<template>
    <div class="box">
        <div class="left-box">
            <!-- <van-nav-bar title="分类页" left-text="返回" left-arrow @click="onClickLeft" /> -->
            <van-sidebar v-model="active">
                <van-sidebar-item :title="item" v-for="item in LeftList" @click="changeList" />
            </van-sidebar>
        </div>

        <div class="right-box">
            <div class="content" v-for="item in RightList">
                <p>{{ item.brand }}</p>
                <ul>
                    <li>
                        <img :src="item.img1" alt="">
                        <p>{{ item.category }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>

export default {
    data() {
        return {
            active: '0',
            LeftList: [],
            RightList: [],
            count: 1,
            limitNum: 10,
            category: ''
        };
    },
    methods: {
        onClickLeft() {
            this.$router.push('/')
        },
        changeList() {
            this.$http.get('/pro/categorybrandlist', {
                params: {
                    category: 'String'
                }
            }).then(res => {
                if (res.data.code === '200') {
                    this.RightList.push(res.data)
                    console.log(res.data.data);
                }
            })
        }
    },
    created() {
        this.$http.get('/pro/categorylist', {
            params: {
                count: this.count,
                limitNum: this.limitNum,
                keyword: ''
            }
        }).then(res => {
            if (res.data.code === '200') {
                this.LeftList = res.data.data
                console.log(res.data);
            }
        })
    }

}

</script>
<style scoped>
.box {
    display: flex;
    height: 100%;
}

.left-box {
    height: 100%;
    position: relative;
    width: 80px;
}

.right-box {
    background-color: #999;
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

}

.right-box .content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

img {
    width: 70px;
    height: 70px;
    display: block;
}
</style>